<template>
  <div id="app">
    <!-- vue文件公共的数据或者组件可以写这里 -->

    <!-- 音频节点 公共起来用  传好公共数据到index.js的state里面去-->
    <!-- <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${currentAudioInfo.audioId}.mp3`" @canplay="audioCanplay" @timeupdate="audioTimeUpdate"></audio> -->

    <!-- 音频控制条 -->
    <!-- <Control></Control> -->

    <!-- 播放页面 -->
    <!-- <PlayPage></PlayPage> -->
   <!-- <MusicDetail class="ttt"></MusicDetail> -->

    <router-view />
  <!-- <FooterMusicVue></FooterMusicVue> -->
  <!-- <MesicDetwoVue></MesicDetwoVue> -->
    <!-- postcss-pxtorem -->
  </div>
</template>

<!-- <script>
import { mapMutations, mapState } from "vuex";
import Control from "./components/Control.vue";
import PlayPage from "./components/PlayPage.vue";
export default {
  name: "App",

  components: {
    Control,
    PlayPage,
  },

  //生命周期钩子
  created() {
    //这个方法获取上面的播放的音频的这个标签
    this.$nextTick(() => {
      //调用音频播放方法 通过audio标签来调用
      // console.log("this.$refs.audio==>",this.$refs.audio);
      //  this.$refs.audio.play()
      //有节点了我们直接调用 修改vuex的state的$audio属性
      this.setAudio(this.$refs.audio);
    });
    //组件需要用到那个computed来引用的
  },
  //需要用的时候写上这一个计算属性才行
  computed: {
    //解构
      ...mapState(['currentAudioInfo', '$audio', 'isDragProgress', 'currentLyric', 'initTop', 'lyricHeight', 'songLycActiveIndex', 'isChange'])
    }, 

    methods: {
      ...mapMutations(['setAudio', 'setDuration', 'setCurrentTime', 'setCurrentLyric', 'setTop', 'setSongLycActiveIndex']),

      //监听音频是否可以播放
      audioCanplay() {

        if (this.isChange) {
          // console.log('进度发生改变不要重新执行oncanplay事件');
          return;
        }

        // console.log('音频可以播放了');

        

        //获取音频总时长
        let duration = this.$audio.duration;
        // console.log('duration ==> ', duration);

        //vuex: 修改duration
        this.setDuration(duration);

        //根据歌曲的id获取歌词
        this.axios({
          method: 'get',
          url: '/lyric',
          params: {
            id: this.currentAudioInfo.audioId
          }
        }).then(res => {
          // console.log('根据歌曲的id获取歌词 res ==> ', res);

          let lyric = res.data.lrc.lyric.split(/\n/);
          // console.log('根据歌曲的id获取歌词 lyric ==> ', lyric);

          let lyricData = [];

          lyric.forEach(lyc => {
            let lycData = lyc.split(/\]/);
            if (!lycData[1]) {
              return;
            }

            //处理歌词时间点
            let lycTime = lycData[0].slice(1).split(/:/);


            lyricData.push({
              time: Number(lycTime[0]) * 60 + Number(lycTime[1]),
              lyc: lycData[1].trim()
            })
          })

          // console.log('lyricData ==> ', lyricData);

          //vuex: 修改歌词
          this.setCurrentLyric(lyricData);

          //拿到歌词再播放音频
          //播放音频
          this.$audio.play();

        }).catch(err => {
          console.log('err ==> ', err);
        })

      },

      //监听音频的播放进度
      audioTimeUpdate() {

        if (this.isDragProgress) {
          // console.log('正在手动移动进度条');
          return;
        }

        //获取音频当前播放时间
        let currentTime = this.$audio.currentTime;
        // console.log('currentTime ==> ', currentTime);

        //vuex: 修改currentTime
        this.setCurrentTime(currentTime);

        //移动歌词
        //如果当前音频的播放时间 >= 前一句歌词的时间 && 如果当前音频的播放时间 < 后一句歌词的时间
        for (var i = 0; i < this.currentLyric.length; i++) {
          //前一句歌词的时间
          let beforeTime = this.currentLyric[i].time;
          //后一句歌词的时间(如果i是一个最后一个值, 则 i+1 越界)
          let afterTime = 0;
          if (i + 1 === this.currentLyric.length) {
            //如果越界, 则使用当前时间 + 1
            afterTime = currentTime + 1;
          } else {
            afterTime = this.currentLyric[i + 1].time;
          }

          if (currentTime >= beforeTime && currentTime < afterTime) {
            // console.log('this.top ==> ', this.top);
            // console.log('beforeTime ==> ', beforeTime);
            // console.log('afterTime ==> ', afterTime);
            // console.log('this.lyricHeight ==> ', this.lyricHeight);
            // console.log(`第 ${i + 1} 行歌词高亮 ==> `, i);

            //歌词盒子往上移动的top
            if (this.songLycActiveIndex < i) {
              //计算需要移动几行歌词的高度
              let height = this.lyricHeight.slice(0, i);
              let h = 0;
              height.forEach(v => {
                h += v;
              })
              let top0 = this.initTop - h;
              this.setTop(top0);
              this.setSongLycActiveIndex(i);

            }
            
            break;
          }
           
        }

      }
    }
 
};
</script> -->


<script>
import MesicDetwoVue from './components/item/MesicDetwo.vue';
import MusicDetail from './components/item/MusicDetail.vue';
 import FooterMusicVue from './components/item/FooterMusic.vue';
 export default {
   components:{
    // FooterMusicVue,
    // MusicDetail,
    // MesicDetwoVue
   }
 }
</script>


<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  // background-color: white;
  // color: #333333
  box-sizing: border-box;

}
body{
  margin: 0;
  box-sizing: border-box;
}
.icon{
  width: 25px;
  height: 25px;
  // fill: currentColor;
  // fill: white;
  // overflow: hidden;
  // vertical-align: -7.5px;
}

.one-text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auto-img{
  width: 100%;
  display: block;
}
.ttt{
  z-index: 2;
}

a{
  color: black;
}
</style>
